<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>{{fullName}}</p>
  <button @click="but1Click()">按钮1</button>
  <button @click="but2Click()">按钮2</button><!-- 带括号不传参数,会出现undefined -->
  <button @click="but2Click">按钮3</button><!-- 不带括号不带参数,会自动带上event参数 -->
  <button @click="but3Click(123, $event)">按钮4</button><!-- 传参同时获取event属性,使用 $event -->
  <p>--------------</p>
  <!-- v-if 为false时,包含v-if指令的元素,根本不会存在dom中 -->
  <p v-if="isUser">{{fullName}}</p>
  <!-- v-show 为false时,v-show只是给元素添加一个行内样式 display: none; -->
  <p v-show="isUser">{{fullName}}</p>
  <span v-if="isUser">
    <label for="userName">用户账户</label>
    <input type="text" id="userName" placeholder="用户账户" key="userName"/>
    <!-- Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染 -->
    <!-- key解决上述问题之外的情景:这两个元素是完全独立的,不要用一样的key -->
  </span>
  <span v-else>
    <label for="mailbox">用户邮箱</label>
    <input type="text" id="mailbox" placeholder="用户邮箱" key="mailbox"/>
  </span>
  <button @click="isUser = !isUser">切换类型</button>
  <p>--------------</p>
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="but5Click">按钮</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      firstName: "aaa",
      lastName: "bbb",
      isUser: true,
      letters: ["a", "b", "c", "d"]
    },
    // computed: 计算属性 本身是属于属性,{{}}里不需要加括号
    // 一般没有set方法,只读属性,计算属性有缓存,性能高
    computed: {
      // fullName: function () {
      //   return this.firstName + this.lastName;
      // },
      fullName: {
        set: function () {
          console.log("----------")
        },
        get: function () {
          return this.firstName + " " + this.lastName;
        },
      }
    },
    methods: {
      but1Click() {
        console.log("---------------", "but1Click")
      },
      but2Click(a) {
        console.log("---------------", a)
      },
      but3Click(a, event) {
        console.log("---------------", a, event)
      },
      but4Click() {
        this.isUser = !this.isUser;
      },
      but5Click() {
        // 响应式操作数组
        // 1.增加节点
        // this.letters.push("aaa", "bbb", "ccc");
        // 2.删除数组最后一个元素
        // this.letters.pop();
        // 3.删除数组第一个元素
        // this.letters.shift();
        // 4.在数字最前面添加元素
        // this.letters.unshift("aaa", "bbb", "ccc")
        // 5.splice 第一个参数开始位置,第二个参数长度,之后的参数替换内容
        // this.letters.splice(1);//只传一个参数删除后面所有元素
        // this.letters.splice(1, 2);
        // this.letters.splice(2, 1, "f", "g");
        // 5.排序
        // this.letters.sort();
        // 6.倒序
        // this.letters.reverse();

        // set(要修改的对象, 索引值, 修改后的值)
        Vue.set(this.letters, 0, "aaa");
      },
    }
  })
</script>
</html>